<template>
	<view>
		<ttBar title="我的优惠券" leftIcon="icon-back"></ttBar>
		<view class="tabBar">
			<text class="tabBarItem" :class="[status==0?'active':'']" data-status="0" @tap="toggleType">未使用</text>
			<text class="tabBarItem" :class="[status==1?'active':'']" data-status="1" @tap="toggleType">已使用</text>
			<text class="tabBarItem" :class="[status==9?'active':'']" data-status="9" @tap="toggleType">已失效</text>
		</view>
		<scroll-view :style="{'height':scHeight+'px'}" scroll-y="true" @scrolltolower="getData">
			<view class="couponList">
				<block v-for="(item,index) in dataList" :key="index">
					<block v-if="status==0">
						<view class="couponRow">
							<view class="infoBox">
								<view class="left">
									<text class="couponType">{{typeArr[item.coupon.type]}}</text>
									<text class="couponVule">￥{{item.coupon.discount}}</text>
									<text class="couponTxt">{{item.coupon.amount>0?('满'+item.coupon.amount+'元可用'):'无门槛'}}</text>
								</view>
								<view class="middle">
									<image v-if="item.coupon.receive==100" src="@/pagesA/static/newCp.png" mode="widthFix"></image>
									<text>全品类(特例课程除外)</text>
									<text class="time">{{item.startDate}} - {{item.endDate}}</text>
								</view>
								<view class="right">
									
									<button v-if="item.isStart" @tap="toPage" data-url="index">立即使用</button>
									<button v-if="!item.isStart" class="noStart"  @tap="toPage" data-url="index"> 去逛逛 </button>
									<view class="ruleBtn" @tap="toggleRule(index)">
										<text>使用规则</text>
										<text class="iconfont icon-unfold"></text>
									</view>
								</view>
								<text  v-if="!item.isStart" class="noText">未生效</text>
							</view>
							<view class="limitRule" v-if="item.showRule">与以下活动不可同时使用：拼好课</view>
						</view>
					</block>
					<block v-else-if="status==1">
						<view class="couponRow usedcp">
							<view class="infoBox">
								<view class="left">
									<text class="couponType">{{typeArr[item.coupon.type]}}</text>
									<text class="couponVule">￥{{item.coupon.discount}}</text>
									<text class="couponTxt">{{item.coupon.amount>0?('满'+item.coupon.amount+'元可用'):'无门槛'}}</text>
								</view>
								<view class="middle">
									<image v-if="item.coupon.receive==100" src="@/pagesA/static/newCp.png" mode="widthFix"></image>
									<text>全品类(特例课程除外)</text>
									<text class="time">{{item.startDate}} - {{item.endDate}}</text>
								</view>
								<view class="right">
									<image src="@/pagesA/static/usedcp.png"></image>
									<view class="ruleBtn" @tap="toggleRule(index)">
										<text>使用规则</text>
										<text class="iconfont icon-unfold"></text>
									</view>
								</view>
							</view>
							<view class="limitRule" v-if="item.showRule">与以下活动不可同时使用：拼好课</view>
						</view>
					</block>
					<block v-else-if="status==9">
						<view class="couponRow overcp">
							<view class="infoBox">
								<view class="left">
									<text class="couponType">{{typeArr[item.coupon.type]}}</text>
									<text class="couponVule">￥{{item.coupon.discount}}</text>
									<text class="couponTxt">{{item.coupon.amount>0?('满'+item.coupon.amount+'元可用'):'无门槛'}}</text>
								</view>
								<view class="middle">
									<image v-if="item.coupon.receive==100" src="@/pagesA/static/newCp.png" mode="widthFix"></image>
									<text>全品类(特例课程除外)</text>
									<text class="time">{{item.startDate}} - {{item.endDate}}</text>
								</view>
								<view class="right">
									<image src="@/pagesA/static/overcp.png"></image>
									<view class="ruleBtn" @tap="toggleRule(index)">
										<text>使用规则</text>
										<text class="iconfont icon-unfold"></text>
									</view>
								</view>
							</view>
							<view class="limitRule" v-if="item.showRule">与以下活动不可同时使用：拼好课</view>
						</view>
					</block>
				</block>
				<emptyBox type="coupon" v-if="dataList.length<1"></emptyBox>
			</view>
			<view class="couponExplain">
				<text @tap="toPage" :data-url="initInfo.coupon">优惠券说明</text>
				<text class="iconfont icon-questionfill" @tap="toPage" :data-url="initInfo.coupon"></text>
			</view>
		</scroll-view>
		<view class="couponBar" @tap="toPage" data-url="couponList">
			<text class="iconfont icon-qian3"></text>
			<text class="t1">领券中心</text>
			<text class="t2">领取更多优惠，快去看看吧</text>
			<text class="iconfont icon-right"></text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import COMM from "@/common/common.js";
	export default {
		computed: {
			...mapState({
				userInfo:state=>state.user.userInfo,
				initInfo: state => state.sys.initInfo,
			})
		},
		data() {
			return {
				scHeight:uni.getSystemInfoSync().safeArea.height-uni.upx2px(270),
				status:0,		//0 未使用    1已使用    9已失效
				page_no:1,
				dataList:[],
				hasNext:true,
				typeArr:['','牛牛券','优惠券']
			};
		},
		methods:{
			getData(){
				let _now=new Date().getTime();
				if(this.hasNext){
					this.$store.dispatch("apiGetMyCouponList",{
						userId:this.userInfo.userId,
						status:this.status,
						page_no:this.page_no,
						page_size:10
					}).then(res=>{
						if(res.data.data.items.length>0){
							res.data.data.items.forEach((x,i)=>{
								x.showRule=false;
								x.startDate=x.coupon.receive==100?(x.coupon.createTime.replace(/-/g,'.').split(' ')[0]):(x.coupon.startTime.replace(/-/g,'.').split(' ')[0]);
								x.endDate=x.coupon.endTime.replace(/-/g,'.').split(' ')[0];
								x.isStart=COMM.isStart(x.coupon.startTime);
							})
							this.dataList=this.dataList.concat(res.data.data.items);
							this.page_no=res.data.data.nextPage;
							this.hasNext=res.data.data.hasNext;
						}
						
					})
				}else{
					uni.showToast({
						title: '没有更多的数据了',
						icon: 'none'
					});
				}
				
			},
			toggleType(e){
				this.status=parseInt(e.currentTarget.dataset.status);
				this.page_no=1;
				this.hasNext = true;
				this.dataList = [];
				this.getData()
			},
			toggleRule(e){
				let _index=parseInt(e);
				this.dataList[_index].showRule=!this.dataList[_index].showRule
			}
		},
		onLoad() {
			this.getData()
		},
		onPullDownRefresh() {
			this.page_no=1;
			this.hasNext = true;
			this.dataList = [];
			setTimeout(() => {
				
				this.getData()
				
				uni.stopPullDownRefresh();
				
			}, 1500)
		}
	}
</script>

<style lang="less">
	.couponBar{
		display: flex;
		height: 90upx;
		line-height: 90upx;
		padding: 0 30upx;
		align-items: center;
		box-shadow: 0rpx -2rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 6;
		.icon-qian3{
			display: block;
			width: 60upx;
			height: 60upx;
			background-color: #ffcd11;
			color: #FFFFFF;
			border-radius: 50%;
			text-align: center;
			line-height: 60upx;
			font-size: 40upx;
		}
		.t1{
			font-size: 32upx;
			color: #222222;
			margin-left: 20upx;
			margin-right: 30upx;
		}
		.t2{
			font-size: 28upx;
			color: #aaa;
			flex-grow: 1;
		}
		.icon-right{
			font-size: 32upx;
			color: #aaa;
		}
	}
	.tabBar{
		display: flex;
		justify-content: space-around;
		height: 90upx;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		padding: 0 20upx;
		.tabBarItem{
			font-size: 32upx;
			line-height: 84upx;
			border-bottom: 2px solid #FFFFFF;
			padding: 0 20upx;
			color: #202932;
		}
		.active{
			color: #ffb423;
			border-bottom: 2px solid #ffb423;
		}
	}
	.couponExplain{
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #9e9e9e;
		margin-bottom: 20upx;
		
	}
	.couponList{
		display: flex;
		flex-direction: column;
		padding: 36upx;
		padding-bottom: 0;
		.couponRow{
			display: flex;
			flex-direction: column;
			margin-bottom: 28upx;
			.infoBox{
				display: flex;
				align-items: center;
				border: 2px solid #fe4f4a;
				border-radius: 10upx;
				padding: 10upx 0;
				background-color: #FFFFFF;
				position: relative;
				overflow: hidden;
				.left{
					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					align-items: center;
					.couponType{
						display: block;
						height: 60upx;
						padding: 0 50upx 0 20upx;
						border-top-right-radius: 30upx;
						border-bottom-right-radius: 30upx;
						line-height: 60upx;
						background-color: #ff7a76;
						color: #FFFFFF;
						font-size: 32upx;
					}
					.couponVule{
						font-size: 52upx;
						font-weight: bold;
						color: #fe4f4a;
					}
					.couponTxt{
						color: #fe4f4a;
						font-size: 24upx;
						
					}
				}
				.middle{
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					padding: 0 16upx;
					image{
						width: 180upx;
						margin-bottom: 10upx;
					}
					text{
						font-size: 32upx;
						color: #202932;
					}
					.time{
						margin-top: 20upx;
						font-size: 20upx;
						color: #9e9e9e;
					}
				}
				.right{
					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					padding-right: 16upx;
					align-items: center;
					
					image{
						width: 90upx;
						height: 90upx;
					}
					button{
						background-color: #fe4f4a;
						border-radius: 6upx;
						color: #FFFFFF;
						line-height: 1;
						padding: 12upx;
						font-size: 32upx;
						margin: 0;
						margin-top: 10upx;
						
					}
					.noStart{
						border: 1px solid #fe4f4a;
						background-color: #FFFFFF;
						color: #fe4f4a;
					}
					.ruleBtn{
						margin-top: 16upx;
						display: flex;
						font-size: 24upx;
						color: #9e9e9e;
						align-items: center;
					}
				}
				.noText{
					background-color: #fe4f4a;
					color: #FFFFFF;
					font-size: 24upx;
					position: absolute;
					top: -2upx;
					right: 0;
					padding: 2upx 10upx;
					border-bottom-left-radius: 8upx;
				}
			}
			.limitRule{
				background-color: #f4f4f4;
				border-bottom-left-radius: 10upx;
				border-bottom-right-radius: 10upx;
				font-size: 28upx;
				color: #9e9e9e;
				padding: 10upx 20upx;
			}
			
		}
		
		.overcp {
			.infoBox{
				border: 2px solid #b5b5b5;
				.left{
					.couponType{
						background-color: #b5b5b5;
					}
					.couponVule{
						color: #b5b5b5;
					}
					.couponTxt{
						color: #b5b5b5;
					}
				}
				.middle{
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					padding: 0 16upx;
					text{
						font-size: 32upx;
						color: #b5b5b5;
					}
				}
			}
		}
	}
</style>
